<template>
	<!-- 授权页面 -->
	<view class="u-demo">
		<uni-transition  duration="1000" :mode-class="'slide-top'" :styles="transfromClass" :show="true">
			<view class="flex flex-align-center flex-pack-center">
			    <image src="../static/tip-min.png"></image>
			</view>
			<view style="text-align: center; display: flex; flex-direction: column">
			    <text class="te_c f28" style="font-size: 28rpx;font-weight: bold;color: #000000;">旅游记账和调研申请获取以下权限</text>
			    <text class="c999 f22 te_c">获得你的公开信息（昵称、头像等）</text>
			</view>
		</uni-transition>
		<uni-transition  duration="1400" :mode-class="'slide-right'" :styles="transfromClass" :show="true">
			<button  class="f30 cfff button" style="display: flex; align-items: center; justify-content: center;color: #FFFFFF;font-size: 30rpx;font-weight: bold;"  @click="wxGetUserInfo" >授权并登录</button>
		</uni-transition>
		<uni-transition  duration="1800" :mode-class="'slide-bottom'" :styles="transfromClass" :show="true" class="txt te_c f22" style="text-align: center;">
		    授权并登录，即代表您同意我们的
		    <text @click="textChange" style="color: #244bea; border-bottom: 1px solid #506fee">隐私协议</text>
		</uni-transition>
		<view>
		    <!-- app隐私协议弹窗 @open="open" :close-icon-pos="closeIconPos"-->
		   <u-popup v-model="showProduct"length="50%" mode="bottom" :mask="mask" :closeable="closeable"    border-radius="10" height="1100">
		        <view style="margin-top: 30rpx; padding-bottom: 80rpx; margin-bottom: 50rpx; padding-left: 30rpx; padding-right: 30rpx">
		            <scroll-view scroll-view scroll-y="true" style="height: 1000rpx;" >
		                <view style="margin: 20rpx auto; text-align: center">
		                	<text style="font-size: 32rpx; font-weight: bold; color: rgb(39, 37, 37);font-weight: bold;">旅游记账和调研小程序隐私保护指引</text>
		                </view>
		                <text style="font-size: 28rpx">
		                	本指引是旅游记账和调研小程序开发者 "中国旅游研究院(文化和旅游部数据中心)"（以下简称“开发者”）为处理你的个人信息而制定。
		                </text>
		                <view>
		                	<text style="display: block; font-size: 28rpx;font-weight: bold;">1.开发者处理的信息</text>
		                	<text style="font-size: 28rpx">
		                		根据法律规定，开发者仅处理实现小程序功能所必要的信息。
		                	</text>
		                	<text style="font-size: 28rpx">
		                		为了更好的展示页面，使用您的微信头像作为用户头像，开发者将在获取你的明示同意后，收集你的微信昵称、头像。
		                	</text>
		                	<text style="font-size: 28rpx">
		                		为了登录旅游记账和调研小程序，并使用您的手机号自动匹配身份，开发者将在获取你的明示同意后，收集你的手机号。
		                	</text>
		                	<text style="font-size: 28rpx">
		                		开发者 收集你选中的照片或视频信息，用于线上合同签署和记账记录上报。
		                	</text>
		                	<text style="font-size: 28rpx">
		                		开发者 收集你选中的文件，用于线上合同签署。
		                	</text>
		                </view>
		                <view>
		                	<text style="display: block; margin-top: 20rpx; font-size: 28rpx;font-weight: bold;">2.你的权益</text>
		                	<text style="font-size: 28rpx">
		                		2.1关于收集你的微信昵称、头像、收集你的微信昵称、头像、收集你的手机号、收集你的手机号、收集你选中的照片或视频信息、收集你选中的照片或视频信息、收集你选中的文件、收集你选中的文件，你可以通过以下路径：小程序主页右上角“...” — “设置” — “小程序已获取的信息” — 点击特定信息 — 点击“通知开发者删除”，开发者承诺收到通知后将删除信息。
		                	</text>
		                	<text style="font-size: 28rpx">
		                		2.2关于你的个人信息，你可以通过以下方式与开发者联系，行使查阅、复制、更正、删除等法定权利。
		                	</text>
		                	<text style="font-size: 28rpx">
		                		电话号:010-85166153
		                	</text>
		                </view>
		                <view>
		                	<text style="display: block; margin-top: 20rpx; font-size: 28rpx;font-weight: bold;">3.开发者对信息的存储</text>
		                	<text style="font-size: 28rpx">
		                		开发者承诺，除法律法规另有规定外，开发者对你的信息的保存期限应当为实现处理目的所必要的最短时间。
		                	</text>
		                </view>
		                <view>
		                	<text style="display: block; margin-top: 20rpx; font-size: 28rpx;font-weight: bold;">4.信息的使用规则</text>
		                	<text style="font-size: 28rpx">
		                		4.1开发者将会在本指引所明示的用途内使用收集的信息
		                	</text>
		                	<text style="font-size: 28rpx">
		                		4.2如开发者使用你的信息超出本指引目的或合理范围，开发者必须在变更使用目的或范围前，再次以打电话或短信通知方式告知并征得你的明示同意。
		                	</text>
		                </view>
		                <view>
		                	<text style="display: block; margin-top: 20rpx; font-size: 28rpx;font-weight: bold;">5.信息对外提供</text>
		                	<text style="font-size: 28rpx">
		                		5.1开发者承诺，不会主动共享或转让你的信息至任何第三方，如存在确需共享或转让时，开发者应当直接征得或确认第三方征得你的单独同意。
		                	</text>
		                	<text style="font-size: 28rpx">
		                		5.2开发者承诺，不会对外公开披露你的信息，如必须公开披露时，开发者应当向你告知公开披露的目的、披露信息的类型及可能涉及的信息，并征得你的单独同意。
		                	</text>
		                </view>
		                <view>
		                	<text style="display: block; margin-top: 20rpx; font-size: 28rpx;font-weight: bold;">6.你认为开发者未遵守上述约定，或有其他的投诉建议、或未成年人个人信息保护相关问题，可通过以下方式与开发者联系；或者向微信进行投诉。</text>
		                </view>
		                <view style="margin-top: 50rpx; margin-bottom: 50rpx; font-size: 28rpx; font-size: 28rpx">电话号:010-85166153</view>
		                <view class="" style="margin-right: 16rpx;">
		                	<view class="text-right ">更新日期：2021-11-04</view>
		                	<view class="text-right ">生效日期：2021-11-04</view>
		                </view>
		            </scroll-view>
		        </view>
		        <view class="submit-button" v-if="isShowButton">
		            <button
		                class="sbmit-button-item"
		                style="width: 45%; font-size: 30rpx; display: flex; align-items: center; justify-content: center"
		                type="warn"
		                @click="submitNone"
		                data-value="no"
		            >
		                不同意
		            </button>
					
					
					<button
					    class="sbmit-button-item"
					    style="width: 45%; background-color: #029ee9; color: #ffffff; font-size: 30rpx; display: flex; align-items: center; justify-content: center"
						 @click="getLoginTypeChange('../../componentsC/loginType/index')"
					>
					    同意
					</button>
					
		        </view>
		    </u-popup>
		</view>
	</view>
</template>

<script>
	const app=getApp()//获取公共参数
export default {
	data() {
		return {
			isShow: false,
			hideModal: true,
			// 是否显示授权昵称弹窗
			show: false,
			// 是否弹出协议弹窗
			showProduct: false,
			mask: true, // 是否显示遮罩
			closeable: true,
			// 是否显示同意。不同意按钮
			isShowButton:false,
			// 传递的个人信息数据
			rawData: '',
			// 最新的code  授权需要的相关参数
			code: '',
			iv: '',
			encryptedData: '',
			showModle: '',
		};
	},
	computed: {
		// statusCurrent() {
		// }
	},
	onShow() {
		// 提前调用wxlogin获取最新code
		this.wxlogin()
	},
	onLoad() {
	},
	methods: {
		/**
		 * 用户点击授权登录按钮
		 */
		// 关闭授权昵称弹窗
		onClose: function () {
		    this.show=false
		},
		
		// 关闭协议弹窗
		onClosePorduct: function () {
		    this.showProduct=false
		},
		// 同意
		getLoginTypeChange:function(url){
			console.log('同意了',url)
			uni.login({
			    success: (res) => {
						console.log('res.coderes.coderes.coderes.code11111111111111',res.code)
			        if (res.code) {
						this.$store.state.vuex_code=res.code
						uni.navigateTo({
							url: url
						})
			        }
			    }
			});
			
			
			// 关闭协议弹窗
			// this.showProduct=false
		},
		 // 获取头像昵称。地区以及性别
		getUserProfile:function(){
			var _self=this
			uni.getUserProfile({
				desc: '获取你的昵称、头像、地区及性别',
				success: res => {
					console.log('将要存取1',res.rawData)
					console.log('将要存取2',res.encryptedData)
					console.log('将要存取3',res.iv)
					uni.setStorageSync('avatarUserInfo', res.userInfo);
					
					let rawData = res.rawData;
					_self.rawData=rawData
					// 	// 弹出协议弹窗
				    _self.showProduct=true
					// 显示同意不同意按钮
					_self.isShowButton=true
					this.$store.commit('VUEX_RAWDATA',res.rawData)  //注意此处的commit 提交的mutation中的方法
					this.$store.commit('VUEX_ENCRYPTEDDATA',res.encryptedData)
					this.$store.commit('VUEX_IV',res.iv)
					console.log('获取头像昵称。地区以及性别获取头像昵称。地区以及性别获取头像昵称。地区以及性别获取头像昵称。地区以及性别',this.$store.state)
				},
				fail: res => {
					//拒绝授权
					uni.showToast({
						title: '您拒绝了请求,不能正常使用小程序',
						icon: 'error',
						duration: 2000
					});
				}
			});
		},
		// 点击授权登录按钮获取昵称头像确定事件
		wxGetUserInfo:function(encry) {
			console.log('获取用户信息了',encry)
		    var _self = this; 
			uni.showModal({
				title: '温馨提示',
				content: '授权微信登录后才能正常使用小程序功能',
				success(res) {
					console.log(0)
					console.log('虎丘确认结果虎丘确认结果虎丘确认结果',res)
					//如果用户点击了确定按钮
					if (res.confirm) {
						_self.getUserProfile()
					} else if (res.cancel) {
						//如果用户点击了取消按钮
						console.log(3);
						uni.showToast({
							title: '您拒绝了请求,不能正常使用小程序',
							icon: 'error',
							duration: 2000
						});
						return;
					}
				}
			});
		},
		
		// 点击获取头像昵称拒绝事件
		cancel: function () {
			var that=this
		    // 关掉当前弹窗，
		    this.show=false
            // 拒绝提示重新授权
		    uni.showModal({
		        title: '警告',
		        content: '您拒绝了授权,请点击确定跳转到授权页面进行授权。',
		        success: function (res) {
		            if (res.confirm) {
						that.wxGetUserInfo()
		            }
		        }
		    });
		},
		
		// 隐私协议点击事件
		textChange: function () {
		    // 弹出协议弹窗
		    this.showProduct= true
			// 隐藏同意不同意按钮
			this.isShowButton=false
		},
		
		// 点击了拒绝
		submitNone(e) {
			var _self=this
		    this.showModle=e.target.dataset.value
		    if (this.showModle) {
		        uni.showModal({
		            title: '警告',
		            content: '您拒绝了授权，请点击确定跳转到授权页面进行授权。',
		            success: function (res) {
		                if (res.confirm) {
							// 关闭当前协议弹窗
							_self.showProduct=false
							// 重新调用授权信息
		                  _self.wxGetUserInfo()
		                }
		            }
		        });
		    }
		},
		
		// 提前调用login获取登录code
		wxlogin:function() {
		    var _self = this;
		    uni.login({
		        success: (res) => {
		            if (res.code) {
		                // 只有授权成功后才可以调用
		                var code = res.code;
		                _self.code=code
						console.log('虎丘赋值后发的code',_self.code)
		            }
		        }
		    });
		},
		
		userLogin: function () {
		    var that = this;
			uni.request({
			    method: 'GET',
			    url: 'https://jizhang.xqyu.cn/index.php/addons/ykquest/user_api/userlogin',
			    dataType: 'json',
			    header: {
			        'content-type': 'application/x-www-form-urlencoded'
			    },
			    data: {
			        code: that.code,
			        rawData: that.rawData,
			        iv: that.iv,
			        encryptedData: that.encryptedData,
					type:1//type 1 获取手机号   2   获取openid
			    },
			    success: function (result) {
			        if (result.data.code == 1) {
						// console.log('userLogin信息userLogin信息userLogin信息userLogin信息userLogin信息',result)
			            if (result) {
			                uni.setStorageSync('phone', result.data.data.phone); // 存储电话
			                uni.setStorageSync('openid', result.data.data.openid); // 存储openid
			                // 调用后台登录接口
			                // 关闭协议弹窗
			                that.showProduct=false
			                 // 调用登录
			                if (result.data.data.phone) {
			                    that.login(result.data.data.phone);
			                }
			            }
			        } else {
			            uni.showToast({
			                title: '授权登录失败',
			                icon: 'none',
			                duration: 2000
			            });
			        }
			    },
			    fail: function (err) {
			        uni.showToast({
			            title: '授权失败' + err.errMsg,
			            icon: 'none',
			            duration: 2000
			        });
			    }
			});
		},
		
		// 开始登录
		login: function (phone) {
			var _self=this
		    uni.request({
		        method: 'POST',
		        url: 'https://jizhang.xqyu.cn/index.php/api/index/login',
		        dataType: 'json',
		        header: {
		            'content-type': 'application/x-www-form-urlencoded'
		        },
		        data: {
		            phone: phone
		        },
		        success: function (res) {
		            if (res.data.code == 1) {
						console.log('是否登录授权成功',res)
						
						let userType=res.data.data.user_type
						if(userType==="自然人"){
							app.globalData.type=1//自然人
						}else {
							app.globalData.type=2//法人
						}
						app.globalData.id=res.data.data[0].id
						console.log('获取到登录后赋值给app文件里的变量值获取到登录后赋值给app文件里的变量值获取到登录后赋值给app文件里的变量值获取到登录后赋值给app文件里的变量值',app.globalData)
						//此处可能需要后续根据后台返回数据格式修改
						var arr = []
						for (var i in res.data.data) {
						    arr.push(res.data.data[i]); //属性
						    //arr.push(object[i]); //值
						}
						
						let id=arr[0].id
						console.log('shuz',userType,id)
						// _self.loginScore(userType,id)//调用登录累计积分
		                //    存储用户信息
		                uni.setStorageSync('userInfo', res.data.data);
		                uni.showToast({
		                    title: '授权成功',
		                    duration: 2000
		                }); 
						setTimeout(function(){
							//  跳转首页
							uni.switchTab({
							    url: '../../example/components'
							});
						},2000)
		            } else {
		                uni.showToast({
		                    title: "登录绑定的手机号与给联络人的手机号不一致，请联系管理员/联络人" ,
		                    icon: 'none',
		                    duration: 2000
		                }); 
						// 重新授权延迟跳转首页
		                setTimeout(function () {
							_self.wxGetUserInfo()//重新弹窗授权
		                }, 2000);
		            }
		        },
		        fail: function (err) {
		            uni.showToast({
		                title: '登录绑定的手机号与给联络人的手机号不一致，请联系管理员/联络人',
		                icon: 'none',
		                duration: 2000
		            });
		        }
		    });
		},
		
		// 点击手机授权登录按钮
		getPhoneNumber(e) {
			console.log('获取手机号',e)
			// 关闭协议弹窗
			this.showProduct=false
		    var _self = this;
			console.log('获取手机',e)
		    if (e.detail.errMsg=="getPhoneNumber:fail user deny") {
		       _self.getUserProfile()
		    } else {
		        var _self = this;
				this.iv=e.detail.iv,
				this.encryptedData=e.detail.encryptedData // 调用login登录接口
				uni.setStorageSync('userInfoAvatarimage', this.rawData.avatarUrl); // 存储头像
				console.log('获取赋值后的iv,en',this.iv,this.encryptedData,this.rawData)
		        //  // 登录
		        this.userLogin();
		    }
		},
	}
};
</script>

<style scoped lang="scss">
.u-demo {
}
image {
    width: 504rpx !important;
    height: 378rpx !important;
    margin: 50rpx auto !important;
}
text {
    display: block;
    line-height: 2;
}
.button {
    margin-top: 60rpx;
    background: linear-gradient(#1fd5fc, #0452c6);
    width: 580rpx !important;
}
.txt {
    position: absolute;
    left: 0;
    width: 100%;
    bottom: 100rpx;
}
.txt navigator {
    display: inline-block;
    color: #0452c6;
    text-decoration: underline;
}
/*模态框*/
.modals {
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.modals-cancel {
    position: absolute;
    z-index: 1000;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
}

.bottom-dialog-body {
    position: absolute;
    z-index: 10001;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 30rpx;
    height: 800rpx;
    background-color: #fff;
}

/*动画前初始位置*/
.bottom-pos {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
}
.submit-button {
    background-color: #ffffff;
    display: flex;
    position: fixed;
    bottom: 0;
    padding-top: 20rpx;
    padding-bottom: 40rpx;
    width: 100%;
}
text {
    display: inline-block;
}

</style>
